<template>

    <div class="ly-side">
        <!-- 检索 -->
        <div class="ly-search">
            <div class="ly-search-input">
                <el-autocomplete
                        placeholder="请输入检索关键词"
                        prefix-icon="el-icon-search"
                        v-model="searchKey"
                        clearable
                        :maxlength="10"
                        show-word-limit
                        @keyup.enter.native="searchMethod"
                        style="width:300px"
                        :fetch-suggestions="querySearch"
                        @select="handleSelect"
                >
                    <el-button slot="append" icon="el-icon-search" @click="searchMethod"></el-button>
                    <template slot-scope="{ item }">
                        <div class="name">{{ item.searchKey }}</div>
                    </template>
                </el-autocomplete>
            </div>
        </div>

        <!-- 标签信息 -->
        <div class="ly-label">
            <div>
                <el-divider direction="vertical"></el-divider>
                <span>标签化</span>
                <el-divider direction="vertical"></el-divider>
            </div>
            <div class="label-tags">
                <el-link v-for="(label,index) in labelList"
                    :key="index" class="label-tag"
                    @click="showDetail(label.id,label.name)">
                        <el-tag :title="label.description" :type="tagTypeArr[Math.floor(Math.random()*4)]">{{label.name+'（'+(label.num?label.num:0)+'）'}}</el-tag>
                </el-link>
                    <!--<el-badge class="mark" :value="label.num?label.num:0"/>-->
            </div>
        </div>

    </div>

</template>

<script>

    export default {
        data() {
            return {
                searchKey: "",
                searchRecord: [],
                labelList: [],

                pageIndex: 1,
                pageSize: 6,
                totalPage: 0,

                tagTypeArr:['','success','info','warning','danger'],
            };
        },
        methods: {
            searchMethod(searchKeyVal) {
                if (!this.isString(searchKeyVal) && this.searchKey == '') {
                    this.$message({message: '检索值不可为空！', type: 'warning'})
                    return;
                }

                if (this.isString(searchKeyVal)) {
                    this.$router.push({path: '/search', query: {searchKey: searchKeyVal}})
                } else {
                    this.$router.push({path: '/search', query: {searchKey: this.searchKey}})
                }
            },
            searchFindPage() {
                this.$api.Search.showList({
                    'page': this.pageIndex,
                    'limit': this.pageSize,
                }).then(data => {
                    this.searchRecord = data.page.list
                });
            },
            querySearch(queryString, cb) {
                let searchRecord = this.searchRecord;
                // let results = queryString ? searchRecord.filter(this.createFilter(queryString)) : searchRecord;
                // 调用 callback 返回建议列表的数据
                cb(searchRecord);
            },
            // createFilter(queryString) {
            //     return (restaurant) => {
            //         return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            //     };
            // },
            handleSelect(item) {
                this.searchKey = item.searchKey
            },
            showDetail(idVal, nameVal) {
                this.$router.push({path: '/label', query: {id: idVal, name: nameVal}})
            },
            isString(str) {
                return (typeof str == 'string') && str.constructor == String;
            },

            labelFindPage() {
                this.$api.Label.showList({
                    'page': this.pageIndex,
                    'limit': this.pageSize,
                }).then(data => {
                    this.labelList = data.page.list
                });
            },
        },
        mounted: function () {
            this.labelFindPage();
            this.searchFindPage();
        }
    }

</script>

<style>

    .ly-side {
        margin-left: 100px;
        text-align: left;
    }

    .ly-side > div {
        margin-top: 30px;
    }

    .ly-search-input {
        margin-top: 30px;
    }

    .ly-search-record {
        font-size: 14px;
    }

    /* 标签页 */

    .label-tags{
        padding-top: 10px;
    }

    .label-tag{
        margin: 5px 10px;
    }


</style>
